<template>
  
  <div class="container">
    <header>
        商家列表
    </header>
    <div class="businessList">
        <ul>
            <li>
                <div class="left">
                    <img >
                    <div class="business-img-quantity">
                        3
                    </div>
                </div>
                <div class="right">
                    <!-- <h3 v-text="item.businessName">万家饺子</h3> -->
                    <h3 @click="toDetail">螺蛳粉</h3>
                    <span>￥ 15起送| ￥4配送</span>
                    <p>各种饺子、炒菜</p>
                </div>
            </li>
            <li>
                <div class="left">
                    <img >
                    <div class="business-img-quantity">
                        3
                    </div>
                </div>
                <div class="right">
                    <!-- <h3 v-text="item.businessName">万家饺子</h3> -->
                    <h3 >螺蛳粉</h3>
                    <span>￥ 15起送| ￥4配送</span>
                    <p>各种饺子、炒菜</p>
                </div>
            </li>
        </ul>
    </div>
    <Footer></Footer>
  </div>
  
</template>

<script setup lang="ts">
  import {useRouter} from "vue-router"

  const router = useRouter();

  let toDetail = ()=>{
    console.log("to detail")
    router.push("/shop/detail");
  }

</script>


<style scoped>
.container{
    width: 100%;
}

.container header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4.8vw;
    z-index: 5;
    color: white;
    font-weight: 700;
}


.container .businessList{
    width: 100%;
}

.container .businessList ul{
    width: 100%;
    padding-bottom: 8.7vw;
}

.container .businessList ul li{
    width: 95%;
    display: flex;
    margin: 2vw;
    border-bottom: 0.1vw solid #666;
}

.container .businessList .left img{
    width: 20vw;
    height: 20vw;
}

.container .businessList ul li .right{
    margin: 3vw 2vw;
}

.container .businessList ul li h3{
    font-size: 3.8vw;
    color: #555;
}

.container .businessList ul li span{
    font-size: 3vw;
    color: #888;
    margin-top: 2vw
}
.container .businessList ul li p{
    font-size: 3vw;
    color: #888;
    margin-top: 2vw
}

.business-img-quantity{
    width: 5vw;
    height: 5vw;
    background-color: red;
    color: #fff;
    font-size: 3.6vw;
    border-radius: 2.5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 75.8vw;
    top: 13.5vw;
}







</style>

